<!-- 新增收货地址 -->
<template>
	<view>
		<u-navbar :isFixed="false" title="新增发货地址" :borderBottom="false"></u-navbar>
		<view class="item flex_align">
			<view class="name">发货人</view>
			<input type="text" v-model="username" placeholder="请填写发货人姓名">
		</view>
		<view class="item flex_align">
			<view class="name">手机号</view>
			<input type="number" maxlength="11" v-model="mobile" placeholder="请填写手机号">
		</view>
		<view class="item flex_align">
			<view class="name">发货地址</view>
			<view class="flex_bet_align value" @click="showpicker=true">
				<text class="uni-input">{{array[0]}} {{array[1]}} {{array[2]}}</text>
				<text class="iconfont icon-xwtubiaoku-03"></text>
			</view>
		</view>
		<view class="" v-if="array[0]!=''">
			<u-picker v-model="showpicker" @confirm="setcity" :range="array" :default-region="array" mode="region"
				class="lineputs"></u-picker>
		</view>

		<view class="item flex_align">
			<view class="name">详细地址</view>
			<view class="value">街道、门牌号、小区</view>
		</view>
		<textarea v-model="address" placeholder-style="line-height: 60rpx;" placeholder="请填写详细地址，不少于5个字" />
		<view class="block"></view>
		<view class="item flex_bet_align">
			<view class="name">设为默认</view>
			<u-checkbox active-colo="#007AFF" v-model="checked" shape="circle" @change="checkboxChange" />
		</view>
		<view style="height:135rpx;"></view>
		<view class="btn" @click="submits">保存</view>
	</view>
</template>

<script>
	import amapFile from "../static/js/amap-wx.js"
	import App from '@/App.vue';
	var _this;
	export default {
		data() {
			return {
				checked: false,
				array: ["", "", ""],
				address: "",
				username: "",
				mobile: "",
				is_default: 2,
				id: -1,
				showpicker: false
			}
		},
		onLoad(options) {
			_this = this
			// 是否属于修改地址
			if (options.id) {
				_this.$api.get("finsupplyaddress", {
					detail_id: options.id
				}).then(data => {
					_this.array = [data.province, data.city, data.area]
					_this.username = data.username
					_this.mobile = data.mobile
					_this.address = data.address
					_this.is_default = data.is_default
					_this.checked = data.is_default == 1
					_this.id = options.id
				});
			} else {
				_this.getuserLocation()
			}
		},
		methods: {
			setcity(e) {
				_this.array = [e.province.label, e.city.label, e.area.label]
				console.log(_this.array)
			},
			// 设为默认
			checkboxChange(e) {
				_this.is_default = e.value ? 1 : 2
			},
			// 切换城市
			setatlas(e) {
				_this.array = e.detail.value
			},
			// 后去当前位置
			getuserLocation() {
				// 高德地图获取当前定位
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let Component = data[0].regeocodeData.addressComponent
						_this.array = [Component.province, Component.city != "" ? Component.city : Component
							.province, Component.district
						]
						// _this.address = data[0].name
					}
				})

			},
			// 提交
			submits() {
				let phonezz = /^1[0-9]{10}$/;
				if (_this.username.length < 1) {
					wx.showToast({
						title: "请输入发货人姓名",
						icon: "none"
					})
				} else if (_this.mobile.length < 1) {
					wx.showToast({
						title: "请输入手机号",
						icon: "none"
					})
				} else if (!phonezz.test(parseInt(_this.mobile))) {
					wx.showToast({
						title: "手机号格式有误",
						icon: "none"
					})
				} else if (_this.address.length < 1) {
					wx.showToast({
						title: "请输入详细地址",
						icon: "none"
					})
				} else {
					let data = {}
					data.mobile = _this.mobile
					data.address = _this.address
					data.username = _this.username
					data.province = _this.array[0]
					data.city = _this.array[1]
					data.area = _this.array[2]
					data.is_default = _this.is_default
					if (_this.id > 0) {
						data.opt_type = 2
						data.id = _this.id
					} else {
						data.opt_type = 1
					}
					_this.$api.post("addsupplyaddress", data).then(data => {
						wx.showToast({
							title: _this.id > 0 ? '修改成功' : '添加成功'
						})
						_this.$plug.isonshow(2)
						setTimeout(function() {
							wx.navigateBack({
								delta: 1
							})
						}, 1000);

					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #eeeeee;
	}

	.item {
		background-color: #FFFFFF;
		height: 125rpx;
		line-height: 125rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #EEEEEE;

		.name {
			width: 215rpx;
			text-align: left;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #222222;
		}

		input {
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
		}

		.value {
			width: 100%;
		}

		.iconfont {
			color: #999999;
		}

		.site {
			width: 400rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #333333;
		}
	}

	textarea {
		width: 100%;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #9e9ea6;
		line-height: 60rpx;
	}

	.block {
		width: 100%;
		height: 15rpx;
	}

	.btn {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(86deg, #37bd8d 3%, #06adb9 97%);
		border-radius: 46rpx;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		position: fixed;
		bottom: 44rpx;
		left: 30rpx;
	}
</style>
